import React, {Component,Fragment} from 'react';
import {Button, Card, List, Typography } from 'antd';
import {ArrowLeftOutlined} from '@ant-design/icons';
import {BASE_URL} from '../../../config'
import {reqProductInfo} from '../../../api/index.js'
/**
 * 首页路由组件
 */
export default class Home extends Component {
	//  constructor(props, context) {
	//         super(props, context);
	//         this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
	// }
	state = {
	    name: '',
	    desc: '',
	    price: 0,
	    categoryId: '',
	    categoryName: '',
	    detail: '',
	    imgs: [],
		productInfo:{},
		name:''
	}
	// {
	//     imgs.map(item => {
	//         return (
	//             <img style={{width:'250px'}} key={item} src={`${BASE_URL}/upload/` + item} alt="商品图片"/>
	//         )
	//     })
	// }
	componentDidMount=async ()=>{
		 const {obj} = this.props.location.state || {}
		 if(obj.length !=0) {
			
			 const id = obj.categoryId
			  console.log(id)
			 	const {status,data} = await reqProductInfo(id);
			 			if(status === 0){
			 				this.setState({productInfo:obj})
			 				this.setState({name:data.name})
			 			}
		 }
	     


		// this.getProductInfo()
		
	}
	// getProductInfo=async()=>{
	// 	console.log(this.props.id)
	// 
	// 	console.log(status)
	// 	console.log(data)
	// }
    render() {
		const {productInfo,name} = this.state
		const imgs = productInfo.imgs
		console.log(imgs)
		// console.log(this.props.location.id)
        return (
            <div>
			    <Card title={
                <Fragment>
                    <Button size={"large"} type="link"
                            icon={<ArrowLeftOutlined onClick={() => {
                                this.props.history.goBack()
                            }}/>}>
                        <span>商品详情</span>
                    </Button>
                </Fragment>
            }>
				      <List>
						 <List.Item>
						     <Typography.Text>
						         <span style={{fontSize: '20px', fontWeight: 'bold'}}>商品名称：</span>
								 <span>{productInfo.name}</span>
						     </Typography.Text>
						 </List.Item>
						 <List.Item>
						     <Typography.Text>
						         <span style={{fontSize: '20px', fontWeight: 'bold'}}>商品描述: </span>
								 <span>{productInfo.desc}</span>
						     </Typography.Text>
						 </List.Item>
						 <List.Item>
						     <Typography.Text>
						         <span style={{fontSize: '20px', fontWeight: 'bold'}}>商品价格：</span>
								 <span>{productInfo.price} </span>
						     </Typography.Text>
						 </List.Item>
						 <List.Item>
						     <Typography.Text>
						         <span style={{fontSize: '20px', fontWeight: 'bold'}}>所属分类：</span>
								 <span>{name}</span>
						     </Typography.Text>
						 </List.Item>
						 <List.Item>
						     <Typography.Text>
						         <span style={{fontSize: '20px', fontWeight: 'bold'}}>商品图片：</span>
						         <span>
						         {
						            imgs && imgs.map(item => {
						                 return (
						                     <img style={{width:'250px'}} key={item} src={`${BASE_URL}/upload/` + item} alt="商品图片"/>
						                 )
						             })
						         }
						         </span>
						     </Typography.Text>
						 </List.Item>
						 <List.Item>
						     <Typography.Text>
						         <span style={{fontSize: '20px', fontWeight: 'bold'}}>商品详情：</span>
								 <span>经常使用</span>
						     </Typography.Text>
						 </List.Item>
					  </List>
				</Card>        
            </div>
        );
    }
}
// 如果imgs有数据，则给他添加map()方法
 // {
 //    imgs && imgs.map(item => {
 //         return (
 //             <img style={{width:'250px'}} key={item} src={`${BASE_URL}/upload/` + item} alt="商品图片"/>
 //         )
 //     })
 // }